$(function () {
//城市下拉框
// 	$('#city_box').combo({
// 		//width : 300,
// 		height : 25,
// 		//panelWidth : 300,
// 		//panelHeight : 50,
// 		//editable : false,
// 		//disabled : true,
// 		//readonly : true,
// 		//hasDownArrow : false,
// 		//value : '123',
// 		//delay : 1000,
// 		/*
// 		onShowPanel : function () {
// 			alert('显示触发');
// 		},
// 		onHidePanel : function () {
// 			alert('隐藏触发');
// 		},
		
// 		onChange : function (newValue, oldValue) {
// 			alert(newValue + '|' + oldValue);
// 		},
// 		*/
// 		required : true,
// 	});
	
// 	$('#city').appendTo($('#city_box').combo('panel'));
// 	$('#city_box').combo('setText',"北京");
// 	$('#city input').click(function () {
// 		var v = $(this).val();
// 		var s = $(this).next('span').text();
// 		$('#city_box').combo('setValue', v).combo('setText', s).combo('hidePanel');
// 	});
	
// 	//console.log($('#box').combo('textbox'));
	
// 	$(document).click(function () {
// 		//$('#box').combo('resize', 'width');
// 		//$('#box').combo('showPanel');
// 		//console.log($('#box').combo('isValid'));
// 		//console.log($('#box').combo('getText'));
// 		//console.log($('#box').combo('getValue'));
// 		$('#city_box').combo('setValues', ['1','2','3']);
// 		console.log($('#city_box').combo('getValues'));
// 	});
// //搜索框
// 	$('#ss').searchbox({
// 		width : 300,
// 		height : 22,
// 		menu : '#box',
// 		searcher : function (name, value) {
// 			alert(name + '-' + value);
// 		},
// 		prompt : '请输入关键字',
// 		// value : '秦风阁',
// 		//disabled : true,
// 	});
	
// 	var m = $('#ss').searchbox('menu');
// 	m.menu('setIcon', {
// 		target : m.menu('findItem', '服务').target,
// 		iconCls : 'icon-ok',
// 	});
	
	//console.log($('#ss').searchbox('textbox'));
	//console.log($('#ss').searchbox('getValue'));
	//$('#ss').searchbox('setValue', '123');
	//console.log($('#ss').searchbox('getName'));
	//$('#ss').searchbox('selectName', 'sports');
	//$('#ss').searchbox('destroy');
	//$('#ss').searchbox('resize', 500);
	//$('#ss').searchbox('disable');
	//$('#ss').searchbox('enable');
	//$('#ss').searchbox('clear');
	// $(document).dblclick(function () {
	// 	$('#ss').searchbox('reset');
	// });


//图片轮播


	var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
	var len = $("#focus ul li").length; //获取焦点图个数
	var index = 0;
	var picTimer;
	
	//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
	var btn = "<div class='btnBg'></div><div class='btn'>";
	for(var i=0; i < len; i++) {
		btn += "<span></span>";
	}
	btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
	$("#focus").append(btn);
	$("#focus .btnBg").css("opacity",0.8);

	//为小按钮添加鼠标滑入事件，以显示相应的内容
	$("#focus .btn span").css("opacity",0.7).mouseenter(function() {
		index = $("#focus .btn span").index(this);
		showPics(index);
	}).eq(0).trigger("mouseenter");

	//上一页、下一页按钮透明度处理
	$("#focus .preNext").css("opacity",0.5).hover(function() {
		$(this).stop(true,false).animate({"opacity":"0.5"},300);
	},function() {
		$(this).stop(true,false).animate({"opacity":"0.2"},300);
	});

	//上一页按钮
	$("#focus .pre").click(function() {
		index -= 1;
		if(index == -1) {index = len - 1;}
		showPics(index);
	});

	//下一页按钮
	$("#focus .next").click(function() {
		index += 1;
		if(index == len) {index = 0;}
		showPics(index);
	});

	//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
	$("#focus ul").css("width",sWidth * (len));
	
	//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
	$("#focus").hover(function() {
		clearInterval(picTimer);
	},function() {
		picTimer = setInterval(function() {
			showPics(index);
			index++;
			if(index == len) {index = 0;}
		},4000); //此4000代表自动播放的间隔，单位：毫秒
	}).trigger("mouseleave");
	
	//显示图片函数，根据接收的index值显示相应的内容
	function showPics(index) { //普通切换
		var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
		$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
		//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
		$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
	}

//导航菜单
	$("#keleyihovertree").hovertree({ "width": "keleyi", "initStatus": 'keleyi' });
	
});



	







	









